const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成模板html文件
const miniCssExtractPlugin = require('mini-css-extract-plugin'); // 分离css的方法 webpack 4 
module.exports = {
    entry: {
        a: './src/script/a.js',
        b: './src/script/b.js'
    },
    mode: 'development', // 会自动把process.env.NODE_ENV 设置文对应的参数 production
    output: {
        path: path.resolve(__dirname, 'dist'), // 文件路径
        filename: 'js/[name].js?v=[chunkhash]', // 文件名
        publicPath: '' // 上线的时候的url
    },
    module: {
        rules: [{
                test: /\.js$/,
                include: [path.resolve(__dirname, 'src/script')],
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                include: [path.resolve(__dirname, 'src/style')],
                use: [
                    miniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                include: [path.resolve(__dirname, 'src/style')],
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.ejs$/,
                use: ['ejs-loader']
            },
            {
                test: /\.((png|jpg|gif)$)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: '2000',
                        name: 'img/[name].[ext]?v=[hash]'
                    }
                }, 'img-loader', ]
            }
        ]
    },
    plugins: [
        // 这个tempalte 是模板本文件 插件会根据模板生成具有依赖的html文件 可以到npm查看具体相关参数
        new htmlWebpackPlugin({
            template: './src/index1.html', // 模板的路径
            filename: 'index1.html?v=[chunkhash]', // 可以设置文件名字
            inject: false, // 依赖的脚本是在head标签还是body标签里面 设置false 则不会自动把chunk参数的脚本插入到页面
            title: '我是a页面!', // 可以直接给模板注入数据 (使用的是jade模板语法)
            date: new Date(), // 可以直接给模板注入数据
            minify: { // 上线的时候对模板进行压缩
                removeComments: true, //删除空格
                collapseWhitespace: true // 删除空格
            },
            chunks: ['a'], // 指定模板页面独有的js文件
            excludeChunks: ['b'] // 排除指定的chunks
        }),
        new htmlWebpackPlugin({
            template: './src/index2.html', // 模板的路径
            filename: 'index2.html?v=[chunkhash]', // 可以设置文件名字
            inject: true, // 依赖的脚本是在head标签还是body标签里面 设置false 则不会自动把chunk参数的脚本插入到页面
            title: '我是b页面', // 可以直接给模板注入数据 (使用的是jade模板语法)
            date: new Date(), // 可以直接给模板注入数据
            minify: { // 上线的时候对模板进行压缩
                removeComments: true, //删除空格
                collapseWhitespace: false // 删除空格
            },
            chunks: ['b'], // 指定模板页面独有的js文件
            excludeChunks: ['a'] // 排除指定的chunks
        }),
        new miniCssExtractPlugin({
            filename: "style/[name].css?v=[hash]",
        })
    ]
}